<template>
	<view>
		<view style="position: fixed; bottom: 0;left: 0;width: 100%;height: 250upx; display: flex; align-items: center;">
			<view style="display: flex;overflow: auto;white-space: nowrap;">
				<view class="item-img" v-for="(item,index) in imgList" :key="index" @click="selimg(index)">
					<view class="sel" v-if="index == imgData.imgIndex">
						<i class="iconfont iconqueding"></i>
					</view>
					<image class="img" :src="item" mode="aspectFill"></image>
				</view>

				<view @click="chooseImage">
					<view class="upload-btn">
						<i class="iconfont iconicon-test" style="font-size: 50upx;color: #DDDDDD;"></i>
						<view style="font-size: 32upx;color: #DDDDDD;margin-top: 20upx;">添加图片</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgData: uni.getStorageSync('artImgs'),
				imgList: []
			}
		},
		onNavigationBarButtonTap(e) {
			uni.setStorageSync('artImgs',this.imgData);
			var _this = this;
			setTimeout(function() {
				uni.navigateBack({
					delta: 1
				})
			}, 500);
		},
		onLoad(e) {
			this.dataFunc();
		},
		methods: {
			selimg: function(index) {
				this.imgData.imgIndex = index;
			},
			dataFunc() {
				this.imgList = [];
				if(this.imgData.fromEditor.length > 0) {
					this.imgData.fromEditor.forEach((item) => {
						this.imgList.push(item);
					})
				}
				if(this.imgData.fromCover.length > 0) {
					this.imgData.fromCover.forEach((item) => {
						this.imgList.push(item);
					})
				}
				this.$forceUpdate();
			},
			/* 选择封面图片 */
			chooseImage: function() {
				var _this = this;
				uni.chooseImage({
					count: 1,
					success: function(res) {
						uni.showLoading({
							title: '上传中'
						});
						_this.$uapi.apifile('api/v1/upload', {
							file: res.tempFilePaths[0]
						}).then(res => {
							var result = JSON.parse(res.data);
							if (result.code == 200) {
								let url = result.data.fileUrl;
								_this.imgData.fromCover.push(url);
								_this.dataFunc();
								uni.showToast({
									title: '上传成功',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
							uni.hideLoading();
						})
					}
				});
			}
		}
	}
</script>

<style>
	.lists {
		display: flex;
		justify-content: flex-start;

	}

	.sel {
		width: 15px;
		height: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 5upx;
		background-color: #00D5A2;
		color: #FFFFFF;
		position: absolute;
		z-index: 99;
		right: 10upx;
		top: 10upx;

		i {
			font-size: 16upx;
		}
	}

	.item-img {
		margin-left: 15px;
		position: relative;
	}

	.img {
		width: 180upx;
		height: 180upx;
		border-radius: 10upx;
	}

	.upload-btn {
		width: 180upx;
		height: 180upx;
		border-radius: 10upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-left: 20upx;
		margin-right: 40upx;
		border: 1upx solid #DDDDDD;
		border-radius: 10upx;
	}
</style>
